/*
 * @Author: xuchao 
 * @Date: 2018-06-05 14:49:45 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-15 10:44:46
 * 
 * @comments: 首页安全人才招聘轮播组件
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './style.less';

export default class Slider extends Component {
    constructor(props){
        super(props)    
        this.state = {
            style: [{
                'transform': 'translate3d(567px,0,0) scale(0.81)',
                'transformOrigin': '100% 50%',
                'opacity': '0.8',
                'zIndex': '2',
                title: '安全企业'
            }, {
                'transform': 'translate3d(340px,0,0) scale(1)',
                'opacity': '1',
                'zIndex': '3',
                title: '安全人才招聘'
            }, {
                'transform': 'translate3d(118px,0,0) scale(0.81)',
                'transformOrigin': '0 50%',
                'opacity': '0.8',
                'zIndex': '2',
                title: '安全云课堂'
            }],
            title: '安全人才招聘'
        }
    }
    
    prev(){
        const { style } = this.state;
        style.push(style[0]);
        style.shift();
        this.setState({
            style: style,
            title: style[1].title
        })
    }

    next(){
        const { style } = this.state;
        style.unshift(style[style.length-1]);
        style.splice(style.length-1, 1);
        this.setState({
            style: style,
            title: style[1].title
        })
    }

    render(){
        const { sliderUrl } = this.props;
        const { style, title } = this.state;
        return (
            <div>
                <p>{title}</p>
                <div className="border" />
                <p className="tit"></p>            
                <div className="Slider">
                    <span className="prev" onClick={this.prev.bind(this)}></span>
                    <ul>
                        {
                            sliderUrl && sliderUrl.map((item, index) => {
                                return (
                                    <li key={index} style={style[index]}>
                                        <Link to={item.link}>
                                            <img src={item.url} alt=""/>
                                        </Link>
                                    </li>
                                )
                            })
                        }
                    </ul>
                    <span className="next" onClick={this.next.bind(this)}></span>
                </div>
            </div>
        )
    }
}
